<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/style/css/pc_base.css">
    <link rel="stylesheet" href="../dist/style/less/lib/swiper.min.css">

</head>

<body>

    <header class="hd">
        <div class="warp">
            <ul class="btn-list">
                <li>
                    <a href="#"><i class="icon iconfont icon-icon"></i></a>
                </li>
                <li>
                    <a href="./register.html">
                        <i class="icon iconfont icon-wode"></i>请登录
                    </a>
                </li>
            </ul>
            <img src="../dist/images/logo.png" alt="" class="logo-img">

        </div>
    </header>


    <div class="prod_details">
        <div class="warp">
            <div class="prod_banner view">
                <div class="swiper-container">
                    <a class="arrow-left" href="#"></a>
                    <a class="arrow-right" href="#"></a>
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="../dist/images/prod1.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="../dist/images/prod2.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="../dist/images/prod1.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="../dist/images/prod2.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="../dist/images/prod1.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="preview">
                    <div class="swiper-container">
                        <a class="arrow-left" href="#"></a>
                        <a class="arrow-right" href="#"></a>

                        <div class="swiper-wrapper">
                            <div class="swiper-slide active-nav">
                                <img src="../dist/images/prod2.jpg" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="../dist/images/prod2.jpg" alt="">

                            </div>
                            <div class="swiper-slide">
                                <img src="../dist/images/prod2.jpg" alt="">

                            </div>
                            <div class="swiper-slide">
                                <img src="../dist/images/prod2.jpg" alt="">

                            </div>
                            <div class="swiper-slide">
                                <img src="../dist/images/prod2.jpg" alt="">

                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>


    <footer class="ft">
        <div class="warp">
            <!--<div class="logo-img">
                <img src="../dist/images/logo.png" alt="">
                <p>深圳市养悦源有限公司</p>
                <p>Copyright ©2015 fitcome.com</p>
            </div>-->
            <div class="list">
                <ul>
                    <li><a href="#"><span>■</span>在线支付</a></li>
                    <li><a href="#"><span>■</span>售后服务</a></li>
                    <li><a href="#"><span>■</span>第三方配送</a></li>
                    <li><a href="#"><span>■</span>联系我们</a></li>
                </ul>
            </div>
            <div class="qr-box">
                <div class="itme-qr">
                    <div class="line"></div>
                    <div class="qr-warp">
                        <div class="qr">
                            <div>
                                <img src="../dist/images/qr1.jpg" alt="">
                                <div class="topbg"></div>
                            </div>
                            <p>下载健康云APP</p>
                        </div>
                    </div>
                </div>
                <div class="itme-qr">
                    <div class="line"></div>
                    <div class="qr-warp">
                        <div class="qr">
                            <div>
                                <img src="../dist/images/qr1.jpg" alt="">
                                <div class="topbg"></div>
                            </div>
                            <p>关注微信公众号</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script src="../dist/js/lib/jquery.min.js"></script>
    <script src="../dist/js/lib/idangerous.swiper.min.js"></script>
    <script>
        var viewSwiper = new Swiper('.view .swiper-container', {
            onSlideChangeStart: function () {
                updateNavPosition()
            }
        })


        var previewSwiper = new Swiper('.preview .swiper-container', {
            visibilityFullFit: true,
            slidesPerView: 'auto',
            onlyExternal: true,
            onSlideClick: function () {
                viewSwiper.swipeTo(previewSwiper.clickedSlideIndex)
            }
        })



        function updateNavPosition() {
            $('.preview .active-nav').removeClass('active-nav')
            var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
            if (!activeNav.hasClass('swiper-slide-visible')) {
                if (activeNav.index() > previewSwiper.activeIndex) {
                    var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
                    previewSwiper.swipeTo(activeNav.index() - thumbsPerNav)
                } else {
                    previewSwiper.swipeTo(activeNav.index())
                }
            }
        }
    </script>

</body>

</html>
